{layout name="formlayout" /}
<div class="layui-tab layui-form layui-tab-brief" lay-filter="layuiadmin-form-role" id="layuiadmin-form-role"
  style="padding: 0 20px;">
  <ul class="layui-tab-title">
    <li class="layui-this">角色信息</li>
    <li>权限分配</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
      <input type="hidden" name="id" value="{$role.id}">
      <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-block">
          <input type="text" name="name" value="{$role.name}" lay-verify="required" autocomplete="off"
            class="layui-input"></input>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">键</label>
        <div class="layui-input-block">
          <input type="text" name="key" value="{$role.key}" lay-verify="required" autocomplete="off"
            class="layui-input"></input>
        </div>
      </div>
    </div>
    <div class="layui-tab-item">
      <div class="layui-form-item">
        <label class="layui-form-label">所属角色</label>
        <div class="layui-input-block">
          <select name="pid" lay-filter="ZBC-user-role-select">
            <option>请选择</option>
            {volist name="roleList" id="item"}
            <option value="{$item.id}" {if ($role.pid==$item.id)} selected{/if}>{$item.name} </option> {/volist}
              </select> </div> </div> <div class="layui-form-item">
              <label for="" class="layui-form-label">权限设置</label>
              <div class="layui-input-block">
                <div id="LAY-user-role-tree"></div>
              </div>
        </div>
      </div>
    </div>
    <div class="layui-form-item layui-hide">
      <button class="layui-btn" lay-submit lay-filter="LAY-user-role-submit" id="LAY-user-role-submit">提交</button>
    </div>
  </div>
  <script>
    layui.config({
      base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
      index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'tree'], function () {
      var $ = layui.$
        , form = layui.form
        , tree = layui.tree;

      window.urTree = tree.render({
        elem: '#LAY-user-role-tree'
        , showCheckbox: true
      });

      form.on('select(ZBC-user-role-select)', function (data) {
        if (data.value) {
          $.post('/admin/permission/permissionsByRoleId?id=' + data.value, function (result) {
            urTree.reload({
              data: result.data
            })
            var rolePermissions = '{$rolePermissions}';
            if (rolePermissions) {
              urTree.setChecked(JSON.parse(rolePermissions))
            }
          })
        }
      })

      layui.event.call(form, 'form', 'select(ZBC-user-role-select)', {
        value: '{$role.pid}'
      })
    })
  </script>